<template>
	<view>
		<scroll-view class="container" scroll-y>
			<!-- 商品轮播图 -->
			<swiper class="swiper" circular indicator-dots autoplay>
				<swiper-item v-for="(item, index) in goods.images" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			
			<!-- 商品信息 -->
			<view class="goods-info">
				<view class="price-box">
					<text class="price">￥{{goods.price}}</text>
					<text class="sold">已售 {{goods.sold}} 件</text>
				</view>
				<view class="title">{{goods.title}}</view>
				<view class="desc">{{goods.desc}}</view>
			</view>
			
			<!-- 商品参数 -->
			<view class="goods-attrs">
				<view class="attr-title">商品参数</view>
				<view class="attr-list">
					<view class="attr-item" v-for="(item, index) in goods.attrs" :key="index">
						<text class="attr-name">{{item.name}}</text>
						<text class="attr-value">{{item.value}}</text>
					</view>
					<view class="attr-item">
						<text class="attr-name">购买数量</text>
						<view class="num-control">
							<view class="num-btn" @click="decreaseNum">-</view>
							<input type="number" v-model="buyNum" class="num-input" />
							<view class="num-btn" @click="increaseNum">+</view>
						</view>
					</view>
				</view>
			</view>
			
		</scroll-view>
		
		<!-- 底部操作栏 -->
		<view class="footer">
			<view class="left-btns">
				<view class="btn-item" @click="goHome">
					<uni-icons type="home" size="24" color="#666666"></uni-icons>
					<text>首页</text>
				</view>
				<view class="btn-item" @click="goCart">
					<uni-icons type="cart" size="24" color="#666666"></uni-icons>
					<text>购物车</text>
					<view class="cart-badge" v-if="cartCount > 0">{{cartCount}}</view>
				</view>
			</view>
			<view class="right-btns">
				<button class="add-cart" @click="addToCart">加入购物车</button>
				<button class="buy-now" @click="buyNow">立即下单</button>
			</view>
		</view>
		
		<!-- 购买确认弹窗 -->
		<view class="popup" v-if="showBuyPopup" @click="closeBuyPopup">
			<view class="popup-content" @click.stop>
				<view class="popup-header">
					<view class="goods-info">
						<image :src="goods.images[0]" mode="aspectFill"></image>
						<view class="info">
							<view class="price">￥{{goods.price}}</view>
							<view class="selected">已选：{{goods.attrs[0].value}}</view>
						</view>
					</view>
					<view class="close" @click="closeBuyPopup">×</view>
				</view>
				
				<view class="popup-body">
					<view class="num-section">
						<text>购买数量</text>
						<view class="stepper">
							<view class="btn minus" :class="{ disabled: buyNum <= 1 }" @click="decreaseNum">
								<uni-icons type="minus" size="16" :color="buyNum <= 1 ? '#ccc' : '#666'"></uni-icons>
							</view>
							<input 
								type="number" 
								v-model="buyNum" 
								class="input"
								@blur="checkNum"
							/>
							<view class="btn plus" @click="increaseNum">
								<uni-icons type="plus" size="16" color="#666"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				
				<view class="popup-footer">
					<view class="total">总计：￥{{totalPrice}}</view>
					<button class="confirm-btn" @click="confirmBuy">提交订单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

// 商品数据
const goods = ref({
	id: 0,
	title: '',
	desc: '',
	price: 0,
	sold: 0,
	images: [],
	attrs: [],
	content: ''
})

// 购物车数量
const cartCount = ref(0)

// 添加购买数量
const buyNum = ref(1)

// 添加购买弹窗相关数据
const showBuyPopup = ref(false)

// 计算总价
const totalPrice = computed(() => {
	return (goods.value.price * buyNum.value).toFixed(2)
})

// 获取商品详情
const getGoodsDetail = (id) => {
	// 模拟商品数据
	goods.value = {
		id: id,
		title: 'iPhone 14 Pro',
		desc: '超视网膜XDR显示屏',
		price: 8999,
		sold: 1234,
		images: [
			'https://picsum.photos/750/750?random=1',
			'https://picsum.photos/750/750?random=2',
			'https://picsum.photos/750/750?random=3'
		],
		attrs: [
			{ name: '颜色', value: '暗紫色' },
			{ name: '容量', value: '256GB' },
			{ name: '制式', value: '5G全网通' },
			{ name: '屏幕尺寸', value: '6.1英寸' }
		],
		content: '<div style="text-align:center;"><img style="width: 100%;" src="https://picsum.photos/750/500?random=4"/><img style="width: 100%;" src="https://picsum.photos/750/500?random=5"/></div>'
	}
}

// 页面加载
onMounted(() => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const goodsId = currentPage.options.id
	getGoodsDetail(goodsId)
})

// 页面方法
const goHome = () => {
	uni.switchTab({
		url: '/pages/index/index'
	})
}

const goCart = () => {
	uni.switchTab({
		url: '/pages/cart/cart'
	})
}

// 增减数量方法
const decreaseNum = () => {
	if (buyNum.value > 1) {
		buyNum.value--
	}
}

const increaseNum = () => {
	buyNum.value++
}

// 修改加入购物车方法
const addToCart = () => {
	uni.showToast({
		title: `已加入购物车 ${buyNum.value}件`,
		icon: 'success'
	})
}

// 修改购买按钮方法
const buyNow = () => {
	showBuyPopup.value = true
}

// 关闭弹窗
const closeBuyPopup = () => {
	showBuyPopup.value = false
}

// 确认购买
const confirmBuy = () => {
	uni.showToast({
		title: `购买${buyNum.value}件，总价${totalPrice.value}元`,
		icon: 'none'
	})
	closeBuyPopup()
}

// 修改数量检查方法
const checkNum = () => {
	let num = parseInt(buyNum.value)
	if (isNaN(num) || num < 1) {
		buyNum.value = 1
	}
}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background: #f7f8fa;
		height: calc(100vh - 100rpx);
		box-sizing: border-box;
	}
	
	.swiper {
		width: 100%;
		height: 700rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.goods-info {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.price-box {
			display: flex;
			align-items: baseline;
			margin-bottom: 20rpx;
			
			.price {
				font-size: 48rpx;
				color: #ff6b81;
				font-weight: bold;
			}
			
			.sold {
				font-size: 24rpx;
				color: #999;
				margin-left: 20rpx;
			}
		}
		
		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 16rpx;
		}
		
		.desc {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.goods-attrs {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.attr-title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		
		.attr-list {
			.attr-item {
				display: flex;
				margin-bottom: 16rpx;
				
				.attr-name {
					width: 160rpx;
					color: #999;
					font-size: 28rpx;
				}
				
				.attr-value {
					flex: 1;
					color: #333;
					font-size: 28rpx;
				}
				
				.num-control {
					display: flex;
					align-items: center;
					border: 1px solid #eee;
					border-radius: 4rpx;
					
					.num-btn {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #666;
						background: #f7f8fa;
					}
					
					.num-input {
						width: 80rpx;
						height: 60rpx;
						text-align: center;
						font-size: 28rpx;
						border-left: 1px solid #eee;
						border-right: 1px solid #eee;
					}
				}
			}
		}
	}
	
	.detail-content {
		background: #fff;
		padding: 30rpx 30rpx 200rpx 30rpx;
        
		
		.content-title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		:deep(.rich-text) {
			width: 100%;
			
			img {
				max-width: 100% !important;
				height: auto !important;
				display: block;
				margin: 0 auto;
			}
		}
	}
	
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		z-index: 100;
		
		.left-btns {
			display: flex;
			align-items: center;
			
			.btn-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 40rpx;
				position: relative;
				
				.uni-icons {
					margin-bottom: 4rpx;
				}
				
				text {
					font-size: 20rpx;
					color: #666;
				}
				
				.cart-badge {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					background: #ff6b81;
					color: #fff;
					font-size: 20rpx;
					height: 32rpx;
					min-width: 32rpx;
					padding: 0 6rpx;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
		.right-btns {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			
			button {
				width: 200rpx;
				height: 72rpx;
				border-radius: 36rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0;
				margin-left: 20rpx;
			}
			
			.add-cart {
				background: #fff;
				color: #ff6b81;
				border: 2rpx solid #ff6b81;
			}
			
			.buy-now {
				background: #ff6b81;
				color: #fff;
			}
		}
	}
	
	// 添加弹窗样式
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		z-index: 999;
		
		.popup-content {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding: 30rpx;
			
			.popup-header {
				display: flex;
				align-items: flex-start;
				margin-bottom: 30rpx;
				
				.goods-info {
					flex: 1;
					display: flex;
					
					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
					}
					
					.info {
						.price {
							font-size: 36rpx;
							color: #ff6b81;
							font-weight: bold;
							margin-bottom: 10rpx;
						}
						
						.selected {
							font-size: 24rpx;
							color: #666;
						}
					}
				}
				
				.close {
					padding: 20rpx;
					font-size: 40rpx;
					color: #999;
					margin: -20rpx -20rpx 0 0;
				}
			}
			
			.popup-body {
				.num-section {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;
					
					text {
						font-size: 28rpx;
						color: #333;
					}
					
					.stepper {
						display: flex;
						align-items: center;
						height: 60rpx;
						border: 2rpx solid #eee;
						border-radius: 8rpx;
						
						.btn {
							width: 60rpx;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							background: #f8f8f8;
							
							&.disabled {
								background: #f5f5f5;
							}
						}
						
						.input {
							width: 80rpx;
							height: 100%;
							text-align: center;
							font-size: 28rpx;
							background: #fff;
							border-left: 2rpx solid #eee;
							border-right: 2rpx solid #eee;
						}
						
						.minus {
							border-radius: 8rpx 0 0 8rpx;
						}
						
						.plus {
							border-radius: 0 8rpx 8rpx 0;
						}
					}
				}
			}
			
			.popup-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
				
				.total {
					font-size: 32rpx;
					color: #ff6b81;
					font-weight: bold;
				}
				
				.confirm-btn {
					width: 240rpx;
					height: 80rpx;
					background: #ff6b81;
					color: #fff;
					border-radius: 40rpx;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style> 